<template>
  <div>
   
  <el-form
      :model="formData"
      inline
      style="display: flex; justify-content: flex-end; margin-top: 10px"
    >
      <el-form-item prop="userId">
        <el-input
          v-model="formData.userId"
          placeholder="请输入用户id"
        ></el-input>
      </el-form-item>

      <el-form-item prop="orderSn">
        <el-input
          v-model="formData.orderSn"
          placeholder="请输入订单编号"
        ></el-input>
      </el-form-item>

      <el-form-item prop="orderStatus">
        <el-select v-model="formData.orderStatus" placeholder="请选择订单状态">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="search" type="primary" icon="el-icon-search"
          >查找</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column
        align="center"
        label="订单编号"
        prop="orderSn"
      ></el-table-column>

      <el-table-column
        align="center"
        label="用户ID"
        prop="userId"
      ></el-table-column>

      <el-table-column align="center" label="订单状态" prop="orderStatus">
        <template slot-scope="scope">
          <el-tag>{{ scope.row["orderStatus"] | tableFilter(options) }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="订单金额"
        prop="orderPrice"
      ></el-table-column>

      <el-table-column
        align="center"
        label="支付金额"
        prop="actualPrice"
      ></el-table-column>

      <el-table-column
        align="center"
        label="支付时间"
        prop="payTime"
      ></el-table-column>

      <el-table-column
        align="center"
        label="物流单号"
        prop="shipSn"
      ></el-table-column>

      <el-table-column
        align="center"
        label="物流渠道"
        prop="shipChannel"
      ></el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="detailsData('订单详情', 'details', scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500">
      <el-descriptions :column="1">
        <el-descriptions-item label="订单编号">{{
          orderData.orderSn
        }}</el-descriptions-item
        ><br />

        <el-descriptions-item label="订单状态">
          <el-tag>{{
            orderData.orderStatus | tableFilter(options)
          }}</el-tag> </el-descriptions-item
        ><br />

        <el-descriptions-item label="订单用户">{{
          orderData.consignee
        }}</el-descriptions-item>

        <el-descriptions-item label="用户留言">{{
          orderData.message
        }}</el-descriptions-item>

        <el-descriptions-item label="收货信息"
          >{{ "(收货人)" + orderData.consignee }}
          {{ "(收货号码)" + orderData.mobile }}
          {{ "(收货地址)" + orderData.address }}</el-descriptions-item
        >

        <el-descriptions-item label="商品信息">
          <el-table v-loading="tableLoading" :data="goodsData" border>
            <el-table-column align="center" label="商品名称" prop="goodsName">
            </el-table-column>
            <el-table-column align="center" label="商品编号" prop="goodsSn">
            </el-table-column>
            <el-table-column
              align="center"
              label="货品规格"
              prop="specifications"
            >
            </el-table-column>
            <el-table-column align="center" label="货品价格" prop="price">
            </el-table-column>
            <el-table-column align="center" label="货品数量" prop="number">
            </el-table-column>
            <el-table-column align="center" label="货品图片" prop="picUrl">
            </el-table-column>
          </el-table>
        </el-descriptions-item>

        <el-descriptions-item label="费用信息">
          {{ "(实际费用)" + orderData.actualPrice + "元" }}={{
            "(商品总价)" + orderData.goodsPrice + "元"
          }}+{{ "(快递费用)" + orderData.freightPrice + "元" }}-
          {{ "(优惠减免)" + orderData.couponPrice + "元" }}-{{
            "(积分减免)" + orderData.integralPrice + "元"
          }}
        </el-descriptions-item>

        <el-descriptions-item label="支付信息">
          {{ "（支付渠道）微信支付 （支付时间）" }}
        </el-descriptions-item>

        <el-descriptions-item label="快递信息">
          {{ "（快递公司） （快递单号） （发货时间）" }}
        </el-descriptions-item>

        <el-descriptions-item label="收货信息">
          {{ "（确认收货时间）" }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  name: "orderManage",
  componentTitle: "订单管理",
  data() {
    return {
      orderData: {},
      orderGoods: {},
      goodsData: {},
      options: [
        {
          label: "已付款",
          value: "301",
        },
        {
          label: "未付款",
          value: "101",
        },
      ],
      dialogTitle: "订单详情",
      dialogType: "details",
      dialogFormData: {
        orderSn: "",
      },
      tableLoading: false,
      dialogVisible: false,
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      formData: {
        orderSn: "",
        userId: "",
      },
      tableData: [],
    };
  },

  mounted() {
    this.search();
  },

  filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },

  methods: {
    detailsData(title, type, row) {
      this.dialogVisible = true;
      this.dialogType = type;
      this.dialogTitle = title;

      axios({
        url: "http://192.168.200.251:8888/admin/order/detail",
        method: "get",
        params: row,
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        console.log(res);
        this.tableLoading = false;

        this.orderData = res.data.data.order;
        this.goodsData = res.data.data.orderGoods;

        this.search();
      });
    },

    search() {
      this.tableLoading = true;

      axios({
        url: "http://192.168.200.251:8888/admin/order/list",
        method: "get",
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData,
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        console.log(res);
        this.tableLoading = false;

        this.tableData = res.data.data.list;

        this.pageInfo.total = res.data.data.total;
      });
    },
    // 每页多少条切换
    handleSizeChange(value) {
      this.pageInfo.limit = value;

      this.search();
    },
    // 当前页码的切换
    handleCurrentChange(value) {
      this.pageInfo.page = value;

      this.search();
    },
  },
};
</script>



